<template>
  <view class="experience-wrapper">
    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-title"></view>
      <view class="nav-right" @tap="onShareAppMessage">分享</view>
    </view>
 
    <!-- 经验列表 -->
    <scroll-view class="experience-list" scroll-y>
      <block v-for="(item, index) in experienceList" :key="index">
        <view class="experience-item" @tap="goToDetail(item)">
          <view class="item-title">{{ item.title }}</view>
          <view class="item-content">{{ item.content }}</view>
          <view class="item-footer">
            <text>作者: {{ item.author }}</text>
            <text>点赞: {{ item.likes }}</text>
          </view>
        </view>
      </block>
    </scroll-view>
 
    <!-- 发布按钮 -->
    <view class="fixed-button" @tap="goToPost">
      发布新经验
    </view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      experienceList: [] // 经验帖子列表
    };
  },
  methods: {
    // 获取经验列表数据（从服务器获取）
    getExperienceList() {
      uni.request({
        url: 'http://localhost:8888/experienceCircle/getAllExperienceCircle',
        method: 'GET',
        success: (res) => {
          if (res.data.code === 200) {
            this.experienceList = res.data.data; // 将获取到的数据赋值给experienceList
          } else {
            uni.showToast({
              title: '获取数据失败',
              icon: 'none'
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: '网络请求失败',
            icon: 'none'
          });
        }
      });
    },
    // 跳转到帖子详情页
    goToDetail(item) {
      uni.navigateTo({
        url: `/pages/experienceDetail/index?id=${item.id}`
      });
    },
    // 跳转到发布新经验页面
    goToPost() {
      uni.navigateTo({
        url: '/pages/postExperience/index'
      });
    },
    // 分享至微信聊天界面
    shareToWeChat() {
      uni.share({
        provider: "weixin",
        scene: "WXSceneSession",  // 分享到微信聊天界面
        type: 1,  // 分享类型为文字
        title: "经验圈分享",
        summary: "快来看看这个有趣的经验圈内容！",
        href: "http://8888", // 替换为你要分享的网页链接
        imageUrl: "", // 可选，分享图片的路径，如果有图片可以加上
        success: (res) => {
          console.log("分享成功:", res);
          uni.showToast({
            title: '分享成功',
            icon: 'success'
          });
        },
        fail: (err) => {
          console.log("分享失败:", err);
          uni.showToast({
            title: '分享失败',
            icon: 'none'
          });
        }
      });
    },
	// 定义分享给朋友的信息
	  onShareAppMessage() {
	    return {
	      title: "经验圈分享",
	      path: "/pages/experience/experience/index?id=" + this.experienceList[0].id,  // 示例路径，可以根据实际情况调整
	      imageUrl: "",  // 可选，分享图片的路径
	    };
	  }
  },
  onLoad() {
    this.getExperienceList(); // 页面加载时获取经验列表
  }
};
</script>

<style>
.experience-wrapper {
  background: linear-gradient(135deg, rgba(170, 207, 252, 1) 0%, rgba(187, 208, 251, 1) 50%, rgba(178, 236, 248, 1) 100%);
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.nav-bar {
  width: 100%; /* 确保导航栏占据整个屏幕宽度 */
  display: flex;
  justify-content: center; /* 水平居中子元素 */
  align-items: center; /* 垂直居中子元素 */
  padding: 20rpx;
  background-color: #5983ff;
  color: white;
  box-sizing: border-box; /* 确保padding不会增加元素的总宽度 */
}

.nav-right {
  width: 10%;
  text-align: center;
  cursor: pointer;
}

.nav-title {
  flex-grow: 1; /* 占据剩余空间并自动居中 */
  text-align: center; /* 确保标题文本居中 */
  font-size: 36rpx;
  font-weight: bold;
  white-space: nowrap; /* 添加这行，防止文本换行 */
  margin-left: 65rpx;
}

.experience-list {
  flex: 1;
  overflow-y: auto;
  padding: 20rpx;
}

.experience-item {
  background-color: rgba(255, 255, 255, 0.8);
  margin-bottom: 20rpx;
  padding: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
}

.item-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.item-content {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.item-footer {
  font-size: 24rpx;
  color: #999;
}

.fixed-button {
  position: fixed;
  bottom: 20rpx;
  left: 50%;
  transform: translateX(-50%);
  padding: 10rpx 20rpx;
  background-color: #5e59ff;
  color: white;
  border-radius: 20rpx;
  text-align: center;
  cursor: pointer;
}
</style>